<template>
  <div>
    <div style="width: 100%;" v-show="worklog==1">
      <el-page-header @back="goBack" content="安全日志查询"></el-page-header>
      <el-divider></el-divider>
      <el-form :inline="true" :model="securitylogfrom">
        <el-form-item>
          <el-input placeholder="安全情况" v-model="securitylogfrom.securitySituation"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-select v-model="securitylogfrom.pId" placeholder="项目名称">
            <el-option label="--请选择--" value></el-option>
            <el-option
              v-for="item in projectname"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-select v-model="securitylogfrom.deptId" placeholder="部门">
            <el-option label="--请选择--" value></el-option>
            <el-option
              v-for="item in deptname"
              :key="item.id"
              :label="item.deptname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-date-picker
            type="date"
            placeholder="起止日期"
            value-format="yyyy-MM-dd"
            v-model="securitylogfrom.updateDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-select v-model="securitylogfrom.fillUser" placeholder="填报人">
            <el-option label="--请选择--" value></el-option>
            <el-option
              v-for="item in username"
              :key="item.id"
              :label="item.userRealname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-select v-model="securitylogfrom.id" placeholder="日志编号">
            <el-option label="--请选择--" value></el-option>
            <el-option v-for="item in securitylog" :key="item.id" :label="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-input placeholder="施工部位" v-model="securitylogfrom.workPart"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-select placeholder="审批状态" v-model="securitylogfrom.approveStatus">
            <el-option label="审批状态" value></el-option>
            <el-option label="审批中" value="1"></el-option>
            <el-option label="审批不通过" value="2"></el-option>
            <el-option label="审批通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" @click="SecurityLogList">查询</el-button>
          <el-button type="primary" @click="add">新增</el-button>
          <el-button type="primary" @click="exportExcel">导出</el-button>
          <el-button type="primary" @click="dy">打印</el-button>
        </el-form-item>
      </el-form>

      <el-table id="out-table" :data="securitylog.slice((currentPage-1)*pagesize,currentPage*pagesize)">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="日志编号" prop="id"></el-table-column>
        <el-table-column label="填写人" prop="userRealname"></el-table-column>
        <el-table-column label="部门" prop="deptName"></el-table-column>
        <el-table-column label="项目名称" prop="projectName"></el-table-column>
        <el-table-column label="日期" prop="updateDate"></el-table-column>
        <el-table-column label="施工部位" prop="workPart"></el-table-column>
        <el-table-column label="当日施工安全情况" prop="securitySituation"></el-table-column>
        <el-table-column label="流程状态" prop="approveStatus">
          <template slot-scope="scope">
            <span style="color: orange;font-weight: 700" v-if="scope.row.approveStatus=='1'">审批中</span>
            <span style="color: red;font-weight: 700" v-if="scope.row.approveStatus=='2'">审批不通过</span>
            <span style="color: green;font-weight: 700" v-if="scope.row.approveStatus=='3'">审批通过</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown>
              <el-button type="primary">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="getSecurityLogId(scope)">查看详情</el-dropdown-item>
                <el-dropdown-item @click.native="updateSecurityLogId(scope)">修改</el-dropdown-item>
                <el-dropdown-item @click.native="del(scope)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 8, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="securitylog.length"
      >//这是显示总共有多少数据</el-pagination>
    </div>
    <!--查看 -->
    <!-- 更新对话框 -->
    <!-- 3.使用子组件 -->
    <SecurityLogXq
      v-bind:getsecuritylogid="getsecuritylogid"
      :securitylogs="securitylogs"
      :worklog="worklog"
      @colse="cols"
      v-if="worklog==2"
    ></SecurityLogXq>
    <!--更新 -->
    <!-- 更新对话框 -->
    <!-- 3.使用子组件 -->
    <SecurityLogUpdate
      v-bind:getsecuritylogid="getsecuritylogid"
      :worklog="worklog"
      @colse="cols"
      @update="update"
      v-if="worklog==3"
      :deptname="deptname"
      :username="username"
      :projectname="projectname"
      :securitylogs="securitylogs"
    ></SecurityLogUpdate>
  </div>
</template>
<script>
import axios from "axios";
import SecurityLogXq from "../../zxm/SecurityLog/SecurityLogXq.vue";
import SecurityLogUpdate from "../../zxm/SecurityLog/SecurityLogUpdate.vue";
import { AttachemenInfoService } from "../../../model/gs/AttachemenInfoService";
const attachemenInfoService = AttachemenInfoService.getInstance();
// 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
export default {
  components: { SecurityLogXq, SecurityLogUpdate }, //注册子组件
  data() {
    return {
      securitylog: [],
      securitylogfrom: {},
      deptname: [],
      username: [],
      projectname: [],
      worklog: 1,
      getsecuritylogid: {},
      currentPage: 1, //初始页
      pagesize: 4, //    每页的数据
      securitylogs: []
    };
  },
  methods: {
    //打印
    dy() {
      window.print();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    goBack() {
      history.back();
    },
    cols(a) {
      this.worklog = a;
    },
    //定义导出Excel表格事件
exportExcel() {
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
        })
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            '安全日志.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
        },

    //查询安全日志
    SecurityLogList() {
      axios
        .get(`http://localhost/SecurityLog`, { params: this.securitylogfrom })
        .then(response => {
          this.securitylog = response.data.data;
        });
    },
    //查询项目名称并渲染到下拉框
    ProjectNameList() {
      axios.get(`http://localhost/SecurityLog/ProjectName`).then(response => {
        this.projectname = response.data.data;
      });
    },
    //查询部门名称并渲染到下拉框
    DeptNameList() {
      axios.get(`http://localhost/SecurityLog/DeptName`).then(response => {
        this.deptname = response.data.data;
      });
    },
    //查询填报人名称并渲染到下拉框
    UserNameList() {
      axios.get(`http://localhost/SecurityLog/UserName`).then(response => {
        this.username = response.data.data;
      });
    },
    //删除安全日志信息
    del(securitylog) {
      axios
        .delete(`http://localhost/SecurityLog/${securitylog.row.id}`)
        .then(() => {
          this.SecurityLogList();
          this.$message("删除成功");
        });
    },
    //查询详情
    getSecurityLogId(securitylog) {
      this.getsecuritylogid = securitylog.row;
      attachemenInfoService.getById(this.getsecuritylogid.other).then(re => {
        // this.securitylogs = re.data.data;
          re.data.data.forEach(item => {
          this.securitylogs.push({
              fileName: item.fileName,
              uploadPerson: this.getsecuritylogid.userRealname,
              uploadDate: item.uploadDate,
              filePath: item.filePath
          })
        })
        this.worklog = 2;
      });
     
    },
    //获取一条数据
    updateSecurityLogId(securitylog) {
      this.getsecuritylogid = securitylog.row;
   attachemenInfoService.getById(this.getsecuritylogid.other).then(re => {
        this.securitylogs = re.data.data;
        this.worklog = 3;
      });    },
    //修改
    update(getsecuritylogid) {
      axios.put(`http://localhost/SecurityLog`, getsecuritylogid).then(() => {
        this.SecurityLogList();
        this.worklog = 1;
        this.$message("修改成功");
      });
    },
    //新增
    add() {
      this.$router.push({ path: "/SecurityLog" });
    }
  },
  created() {
    this.SecurityLogList();
    this.ProjectNameList();
    this.DeptNameList();
    this.UserNameList();
  }
};
</script>

<style scoped>
</style>
